<%--
  Created by IntelliJ IDEA.
  User: code01
  Date: 2021/12/15
  Time: 19:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>人脸特征分析页面</title>
</head>
<style type="text/css">
    .parent{
        width: 90%;
        height: 95%;
        border:1px solid #adadad;
        /* div上下0 左右自动居中*/
        margin:0 auto;
    }

    .left{
        float: left;
        margin-left: 50px;
        width: 15%;
        height: 18%;
    }
    .right{
        float: left;
        margin-left: 25px;
        width: 75%;
        height: 78%;
        border-top-left-radius:20px;
        border-bottom-right-radius: 20px;
    }
    .home{
        margin-top:5px;
        border:1px solid transparent;
        border-radius: 10px;
        color: #f9f9f9;
        height: 29px;
        background-color: #f8f8f9;
        padding-left:10px;
    }
    .home a{
        color: #2e6da4;
        font-size: 16px;
    }
    .face_menu{
        margin-top: 5px;
        background-color: #f8f8f9;
        border-radius: 10px;
    }
    .face_menu li{
        color: #2e6da4;
    }
    .right div[class=right_two],div[class=right_one]{
        float: left;
    }
    .right_one{
        height: 80%;
        width: 380px;
        margin-left: 30px;

    }
    .right_two{
        height: 80%;
        width: 380px;
        margin-top: 96px;
        margin-left: 150px;
        border:1px solid #bce8f1;
    }
    input[type=file] {
        display: block;
        width: 200px;
        font-size: medium;
    }

    /* layout.css Style */
    .upload-drop-zone {
        height: 340px;
        border-width: 1px;
        margin-bottom: 20px;
        width: 378px;
    }

    /* skin.css Style*/
    .upload-drop-zone {
        color: #ccc;
        border-style: dashed;
        border-color: #ccc;
        line-height: 200px;
        text-align: center;
    }
    .identifybutton{
        width: 376px;
        padding:5px 10px;
        font-size:12px;
        line-height:1.5;
        border-radius:3px;
        color:#fff;
        background-color:#337ab7;
        border:1px solid transparent;
    }

    .result p{
        font-size: 18px;
        color: #2e6da4;
        padding-left:100px;
    }
    a{
        text-decoration:none ;
    }
</style>
<%
    String userId = (String) request.getSession().getAttribute("userName");
    if(userId !=null){
    }else {
        // 登录
        response.sendRedirect("/login.jsp");
    }
%>
<body>
<div class="parent">
    <H1 align="center">基于讯飞开放平台人脸特征识别</H1>
    <div class="left">
        <div class="home"><a href="my_home.jsp">首页</a></div>
        <div class="face_menu">
            <div class="home"><a href="face.jsp" id="test" style="color: red">人脸特征分析</a></div>
            <div class="home"><a href="db.jsp" style="color:red">人脸对比</a></div>
        </div>
        <div>
            <a href="loginOut" )>退出登录</a>
        </div>
    </div>
    <div class="right">
        <div class="right_one">
            <div><h4><strong style="font-weight:700;font-size: 18px;">请选择需要人脸特征分析的图片文件</strong></h4></div>
            <div>
                <input type="file" name="file" id="file" accept=".jpg,.png,.bmp" class="upload_button" required>
            </div>
            <h4></h4>
            <!--<h4>或者将图片拖拽到这里</h4>-->
            <div id="drop-zone" class="form-inline-inline">
                <img src="./images/default.jpg" class="upload-drop-zone" id="img"/>
            </div>
            <br/>
            <div class="form-inline">
                <button type="button" class="identifybutton" id="send">识别</button>
            </div>
            <p style="color:gray">
                *图片文件仅支持.jpg/.jpeg/.png/.bmp格式，图片大小不超过800k
            </p>
        </div>
        <div class="right_two">
            <div style="text-align: center;"><h4><strong style="font-weight:700;font-size: 18px;">人脸识别结果</strong></h4></div>
            <br/>
            <br/>
            <div class="result">
                <p>年龄：<span id="age">??</span></p>
                <p>颜值：<span id="yz">??</span></p>
                <p>性别：<span id="sex">?? </span></p>
                <p>表情：<span id="bq">??</span></p>
            </div>
        </div>
    </div>
</div>
</body>
<script src="js/jquery-2.1.0.min.js"></script>
<script>
    // file是图片上传input 的id值
    document.querySelector("#file").onchange = function () {
        let reader = new FileReader();
        let file = this.files[0];
        //读取完成
        reader.onload = function (e) {
            //获取图片dom
            let img = document.querySelector("#img");// img 是图片标签id值
            //图片路径设置为读取的图片
            img.src = e.target.result;

            var strData = new FormData();
            strData.append("upfile",file);
            strData.append("type","feature");
            $.ajax({
                type:"post",
                <%--url:"<%=request.getContextPath()%>/upload",--%>
                url:"<%=request.getContextPath()%>/upload",
                data: strData ,
                processData: false,
                contentType:false,
                async:false,
                success:function (data){
                    console.log(data);
                    alert("上传成功")
                }
            })
        };



        // 识别
        <%--$(".identifybutton").click(function(){--%>
        <%--    $.ajax({--%>
        <%--        type: "POST",  // post方法--%>
        <%--        url: "<%=request.getContextPath()%>/analysis", // 调用feature_analysis路由--%>
        <%--        processData: false,--%>
        <%--        contentType: false,--%>
        <%--        async: false,--%>
        <%--        dataType:"JSON",--%>
        <%--        success: function (result) { // 获取服务器返回的res字典数组--%>
        <%--            console.log(result.code);--%>
        <%--            alert(result.code)--%>
        <%--            if (result.code == 0){--%>
        <%--                alert("识别成功");--%>
        <%--                alert(result.label)--%>
        <%--                if (result.label == 11){--%>
        <%--                    $("#age").html("其他");--%>
        //                 }else if (result.label == 0){
        //                     $("#age").html("0-1")
        //                 }else if (result.label == 1){
        //                     $("#age").html("2-5");
        //                 }else if (result.label == 2){
        //                     $("#age").html("6-10");
        //                 }else if (result.label == 3){
        //                     $("#age").html("11-15");
        //                 }else if (result.label == 4){
        //                     $("#age").html("16-20");
        //                 }else icf (result.label == 5){
        //                     $("#age").html("21-25");
        //                 }else if (result.label == 6){
        //                     $("#age").html("31-40")
        //                 }else if (result.label == 7){
        //                     $("#age").html("41-50");
        //                 }else if (result.label == 8){
        //                     $("#age").html("51-60");
        //                 }else if (result.label == 9){
        //                     $("#age").html("61-80");
        //                 }else if (result.label == 10){
        //                     $("#age").html("80以上");
        //                 }else if (result.label == 12){
        //                     $("#age").html("26-30")
        //                 }
        //             }
        //         },
        //         error: function (err) {
        //             alert(err);
        //         }
        //     })
        // });
          //该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。
        //识别
        $(".identifybutton").click(function (){
            time()
            $.ajax({
                type:"POST",
                url:"<%=request.getContextPath()%>/analysis ",
                processData:false,
                contentType:false,
                async:true,
                dataType:"json",
                success:function (result){
                    console.log(result);
                    // alert(result.code);
                    if(result.code==0){
                        alert("识别成功");
                        console.log("进入")
                        if(result.label==11){
                            $("#age").html("年龄:其他")
                        }else if (result.label == 0){
                            $("#age").html("0-1")
                        }else if (result.label == 1){
                            $("#age").html("2-5");
                        }else if (result.label == 2){
                            $("#age").html("6-10");
                        }else if (result.label == 3){
                            $("#age").html("11-15");
                        }else if (result.label == 4){
                            $("#age").html("16-20");
                        }else if (result.label == 5){
                            $("#age").html("21-25");
                        }else if (result.label == 6){
                            $("#age").html("31-40");
                        }else if (result.label == 7){
                            $("#age").html("41-50");
                        }else if (result.label == 8){
                            $("#age").html("51-60");
                        }else if (result.label == 9){
                            $("#age").html("61-80");
                        }else if (result.label == 10){
                            $("#age").html("80以上");
                        }else if (result.label == 12){
                            $("#age").html("26-30")
                        }else if (result.label == 11){
                            $("#age").html("2-5");
                        }else {
                            $("#age").html("识别失败")
                        }
                        if (result.sexlabel == 0){
                            $("#sex").html("男人");
                        }else if (result.sexlabel == 1){
                            $("#sex").html("女人");
                        }else if (result.sexlabel == 2){
                            $("#sex").html("难以辨认");
                        }else if (result.sexlabel == 3){
                            $("#sex").html("多人");
                        }else {
                            $("#sex").html("识别失败")
                        }
                        if (result.yzlabel == 0){
                            $("#yz").html("漂亮")
                        }else if (result.yzlabel == 1){
                            $("#yz").html("好看")
                        }else if (result.yzlabel == 2){
                            $("#yz").html("普通")
                        }else if (result.yzlabel == 3 ){
                            $("#yz").html("难看")
                        }else if (result.yzlabel == 4){
                            $("#yz").html("其他")
                        }else if (result.yzlabel == 5){
                            $("#yz").html("半人脸")
                        }else if (result.yzlabel == 6){
                            $("#yz").html("多人")
                        }else {
                            $("#yz").html("识别失败")
                        }
                        if (result.bqlabel == 0){
                            $("#bq").html("其他(非人脸表情图片)")
                        }else if (result.bqlabel == 1){
                            $("#bq").html("其他表情")
                        }else if (result.bqlabel == 2){
                            $("#bq").html("喜悦")
                        }else if (result.bqlabel == 3){
                            $("#bq").html("愤怒")
                        }else if (result.bqlabel ==4){
                            $("#bq").html("悲伤")
                        }else if (result.bqlabel == 5){
                            $("#bq").html("惊恐")
                        }else if (result.bqlabel==6){
                            $("#bq").html("厌恶")
                        }else if (result.bqlabel == 7){
                            $("#bq").html("中性")
                        }else{
                            $("#bq").html("识别失败")
                        }
                    }
                },
                error: function (err) {
                    alert(err);
                }
            })
        });

        var wait = 30;
        function time(){
            console.log(wait);
            var btn=document.getElementById("send");
            var str =btn.innerText;
            if (wait==1){
                btn.style.background="#337ab7";
                btn.innerText="再次识别";
                btn.removeAttribute("disabled");
                wait=30;
            }else {
                wait--;
                btn.style.background = "#868670";
                btn.innerText="请"+wait+"秒后再识别";
                btn.setAttribute("DISABLED", "true");
                setTimeout(function (){
                    time();
                },1000);
            }
        }


        reader.readAsDataURL(file);
    };
</script>

</html>
